<div class="user-invite container-fluid">
  <div class="row">
    <div class="edit-toolbar col-xl-12">
      <div class="title">
        <span>邀请用户</span>
      </div>
      <div class="buttons">
        <button [routerLink]="['/pages/org-admin/org-settings/user/list']" type="button"
                class="btn btn-secondary btn-with-icon btn-sm back">
          <i class="fa fa-arrow-circle-left"></i>返回
        </button>
      </div>
    </div>
  </div>
  <hr/>

  <div class="tabs-container">
    <div class="tabs">
      <ngb-tabset  (tabChange)="tabChange($event)">
        <ngb-tab id="info">
          <ng-template ngbTabTitle>基本信息</ng-template>
          <ng-template ngbTabContent></ng-template>
        </ngb-tab>
        <ngb-tab id="groups">
          <ng-template ngbTabTitle>群组</ng-template>
          <ng-template ngbTabContent></ng-template>
        </ngb-tab>
      </ngb-tabset>
    </div>
  </div>

  <div class="tab-bottom-space"></div>

  <form [formGroup]="form" class="my-validate-form">
    <div [class.hidden]="tab != 'info'" class="user-invite-info">
      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>姓名</span></label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="nickname" formControlName="nickname"
                 [(ngModel)]="user.nickname" #nickname>
        </div>
      </div>

      <div class="form-group row">
        <label class="col-sm-2 col-form-label"><span>邮箱</span></label>
        <div class="col-sm-10">
          <input type="text" class="form-control" name="email" formControlName="email"
                 [(ngModel)]="user.email" #email>
        </div>
      </div>
    </div>

    <div [class.hidden]="tab != 'groups'" class="user-invite-groups">
      <div class="form-group row">
        <label class="col-sm-1"></label>
        <div class="col-sm-10">
          <div class="checkbox-list">
            <div class="checkbox-list-inner">
              <div class="toolbar">
                <div class="toolbar-inner">
                  <span (click)="select('all')" class="link">全选</span> |
                  <span (click)="select('none')" class="link">全不选</span>
                </div>
              </div>
              <div>
                <div *ngFor="let item of relations" class="checkbox-list-item">
                  <label *ngIf="item.orgGroupName!='所有人'">
                    <span class="checkbox-name">{{item.orgGroupName}}<span></span></span>
                    <input type="checkbox" class="form-check-input"
                           [(ngModel)]="item.selecting" formControlName="{{'group-' + item.orgGroupId}}">
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
        <label class="col-sm-1"></label>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <button (click)="invite()" type="button" class="btn btn-primary" [disabled]="!form.valid">邀请</button>
        &nbsp;
        <button [routerLink]="['/pages/org-admin/org-settings/user/list']" type="button" class="btn btn-default">取消</button>
      </div>
    </div>

    <div class="form-group row">
      <label class="col-sm-2 col-form-label"></label>
      <div class="col-sm-10">
        <div class="validate-errors">
          <div class="validate-error" *ngFor="let msg of formErrors">
            <div>{{ msg }}</div>
          </div>
        </div>
      </div>
    </div>

  </form>

</div>
